<template>
	<view class="content">
		<view class="top-bg">
			<view class="paytitle flex">
				<image :src="payTitle?'/static/sunc.png':'/static/fail.png'"></image>
				<text class="text">{{payTitle?'支付成功':'支付失败'}}</text>
			</view>
			<view class="miao">{{second}}秒后将自动跳转订单详情界面</view>
			<view class="btn-box flex">
				<view class="returnnacl" @click="gobackIndex">返回首页</view>
				<view class="chakan" @click="goUrl('/pages/orderDetails/orderDetails?type=内置')">查看订单</view>
			</view>
		</view>
		<!-- banner -->
		<view class="banner-box">
			<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="5000">
				<swiper-item v-for="(item,index) in bannerTop" :key="index" @click="goDetails(item.productId)">
					<image class="swiper-item" :src="item.imageArr"></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 商品列表 -->
		<view class="product-list">
			<!-- 有数据 -->
			<product-list :list="navList.orderList" @click_to="goDetails" v-if="navList.orderList.length>0" ></product-list>
		</view>
		<!-- 加载 -->
		<uni-load-more v-if="navList.orderList.length>0" :status="navList.loadingType"></uni-load-more>
		<!-- 获得抽奖券弹窗 -->
		<uni-popup ref="showTickets" type="center" @change="changeTickets" class="pop-box">
			<view class="uni-tip-code">
				<view class="close" @click="closeTickets">
					<image src="/static/closea.png" mode=""></image>
				</view>
				<view class="title">恭喜额外获得抽奖券x{{getNumber}}</view>
				<view class="image-box flex">
					<image src="/static/juan.png"></image>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	var _this;
	const app = getApp();
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import productList from '@/components/product-list/product-list.vue';
	import {
		isSystem,
		returnIndex
	} from '@/utils/common.js';
	export default {
		components: {
			uniLoadMore,
			productList
		},
		data() {
			return {
				bannerTop: [], //顶部banner
				navList: {
					loadingType: 'more',
					page: 1,
					orderList: []
				}, //下面商品
				second: 5,
				pageSize: 8,
				payTitle: false,
				timer: null,
				getNumber: 0
			};
		},
		onLoad(options) {
			_this = this;
			_this.getOrderStatus();
			_this.loadData();
			_this.getClass();
			_this.timer = setInterval(function() {
				if (_this.second == 0) {
					clearInterval(_this.timer)
					uni.reLaunch({
						url: '/pages/orderDetails/orderDetails?type=内置'
					});
					return;
				}
				_this.second--;
			}, 1000)
		},
		onShow() {},
		onHide() {
			clearInterval(_this.timer)
		},
		onUnload() {
			clearInterval(_this.timer)
		},
		// 上拉加载
		onReachBottom() {
			_this.loadData();
		},
		methods: {
			gobackIndex() {
				var system=isSystem();
				if(system=='Iphone'){
					returnIndex();
				}
				if(system=='Android'){
					uni.reLaunch({
						url: '/pages/index/index'
					});
				}
			},
			goUrl(url) {
				uni.reLaunch({
					url: url
				});
			},
			getOrderStatus() {
				_this.$HTTP({
					method: 'GET',
					url: 'fjStoreOrder/getOrderPaid',
					data: {
						"time": Date.parse(new Date())
					},
					// header:'form' 
				}).then(res => {
					if (res.data) {
						_this.payTitle = res.data.resultType;
						_this.getNumber = res.data.lotteryTicket;
						// if(_this.getNumber>0){
						// 	_this.openTickets();
						// }
					}
				}).catch(err => {
					console.log(err)
				})
			},
			getClass() {
				_this.$HTTP({
					method: 'GET',
					url: 'fjStoreProduct/home',
					data: {
						"time": Date.parse(new Date())
					},
					// header:'form' 
				}).then(res => {
					if (res.data) {
						_this.bannerTop = res.data.topBanner;
					}
				}).catch(err => {
					console.log(err)
				})
			},
			//获取订单列表
			loadData(source) {
				var navItem = _this.navList;
				//这里是将订单挂载到tab列表下
				if (navItem.loadingType === 'loading') {
					//防止重复加载
					return;
				}
				if (navItem.loadingType === 'noMore') {
					return; //防止数据没有了还在加载
				}
				navItem.loadingType = 'loading';
				_this.$HTTP({
					method: 'POST',
					url: 'fjStoreProduct/getProductList',
					data: {
						"storeName": '',
						"page": navItem.page,
						"size": _this.pageSize,
						"cateId": '',
						"time": Date.parse(new Date())
					},
					// header:'form' 
				}).then(res => {
					navItem.page++;
					res.data.content.forEach(item => {
						item.newprice = (item.price / 10).toFixed(2)
					})
					if (source == 'reset') {
						navItem.orderList = res.data.content;
					} else {
						res.data.content.forEach(item => {
							navItem.orderList.push(item);
						})
					}
					//loaded新字段用于表示数据加载完毕，如果为空可以显示空白页
					this.$set(navItem, 'loaded', true);
					//判断第一次的数据有没有pageSize的条数  没有则return
					if (res.data.content.length <= _this.pageSize && res.data.content.length >= res.data.total) {
						navItem.loadingType = 'noMore';
						return;
					}
					//判断分页后的数据还有没有  没有则return
					if (res.data.content.length < _this.pageSize || res.data.content.length == 0) {
						navItem.loadingType = 'noMore';
						return;
					}
					//判断是否还有数据， 有改为 more， 没有改为noMore 
					navItem.loadingType = 'more';

				}).catch(err => {
					console.log(err)
				})
			},
			goDetails(id) {
				uni.redirectTo({
					url: '/pages/details/details?data=' + id
				});
			},
			// 获得抽奖券弹窗
			changeTickets(e) {},
			closeTickets() {
				this.$nextTick(() => {
					this.$refs['showTickets'].close();
				});
			},
			openTickets() {
				this.$nextTick(() => {
					this.$refs['showTickets'].open();
				});
			},
		}
	}
</script>

<style lang="less">
	page {
		width: 100%;
		background: #FBFBFF;
	}
</style>
<style scoped lang="less">
	.uni-tip-code {
		width: 750rpx;
		height: 586rpx;
		background-image: url('~@/static/redbg.png');
		background-size: 100% 100%;
		box-sizing: border-box;
		overflow: hidden;
		position: relative;

		.close {
			position: absolute;
			right: 70rpx;
			top: 130rpx;

			image {
				width: 32rpx;
				height: 32rpx;
			}
		}

		.title {
			width: 100%;
			margin-top: 180rpx;
			text-align: center;
			font-size: 36rpx;
			color: white;
		}

		.image-box {
			width: 100%;
			margin-top: 110rpx;
			justify-content: center;
			align-items: center;

			image {
				width: 153rpx;
				height: 82rpx;
			}
		}
	}

	.content {
		width: 100%;
		position: relative;

		.top-bg {
			width: 100%;
			height: 367rpx;
			background: #cfad88;
			border-bottom-left-radius: 60rpx;
			border-bottom-right-radius: 60rpx;
			box-sizing: border-box;
			padding-top: 100rpx;

			.paytitle {
				width: 100%;
				justify-content: center;
				align-items: center;

				image {
					width: 30rpx;
					height: 30rpx;
					margin-right: 15rpx;
				}

				.text {
					font-size: 35rpx;
					color: #FFFFFF;
				}
			}

			.miao {
				width: 100%;
				text-align: center;
				margin-top: 10rpx;
				font-size: 24rpx;
				font-weight: 200;
				color: #FFFFFF;
				transform: scale(.8);
			}

			.btn-box {
				width: 100%;
				align-items: center;
				justify-content: space-between;
				margin-top: 25rpx;
				box-sizing: border-box;
				padding: 0 106rpx;

				.returnnacl {
					width: 170rpx;
					height: 55rpx;
					line-height: 55rpx;
					border: 1rpx solid #FFB633;
					border-radius: 28rpx;
					font-size: 25rpx;
					color: #FFFFFF;
					text-align: center;
				}

				.chakan {
					width: 170rpx;
					height: 55rpx;
					line-height: 55rpx;
					background: #FFB633;
					border-radius: 28rpx;
					font-size: 25rpx;
					color: #FFFFFF;
					text-align: center;
				}
			}
		}

		// banner
		.banner-box {
			width: 100%;
			height: 243rpx;
			margin-top: -30rpx;

			.swiper {
				width: 100%;
				height: 243rpx;
				border-radius: 60rpx;
				overflow: hidden;

				.swiper-item {
					width: 100%;
					height: 100%;
					text-align: center;
				}
			}
		}

		// 商品列表
		.product-list {
			width: 100%;
			min-height: 500rpx;
			box-sizing: border-box;
			padding: 20rpx 15rpx 0 15rpx;
		}
	}
</style>
